<template>
  <div>
      <el-select :style="{width:width+'px'}" @change="changevt" @dblclick.native="popbigtab" placeholder="请选择" ref="ddlspecimenSelect" v-model="myvalue">
          <el-option :key="item.specimen_code" :label="item.specimen_name" :value="item.specimen_code" v-for="item in seloptions">
              <span style="float: left">{{ item.specimen_name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.specimen_code }}</span>
          </el-option>
      </el-select>
      <el-dialog :append-to-body="appendtobody" :close-on-click-modal="false" :visible.sync="dialogTableVisible" title="请选择标本类型">
          <el-container style="height: 500px;">
              <el-main style="overflow: hidden;">
                  <div>
                      <el-input @keydown.native="searchkeydown" @keyup.native="searchkeyup" placeholder="快速检索" prefix-icon="el-icon-search" ref="qcodeinput" style="width:300px;" v-model="qcode"></el-input>
                      <div style="float:right;">
                          <el-button @click="btnok" icon="el-icon-circle-check" style="margin-left:10px;" type="primary">确定</el-button>
                          <el-button @click="dialogTableVisible = false" icon="el-icon-circle-close" plain type="info">取消</el-button>
                      </div>
                  </div>
                  <vxe-grid :columns="tableColumn" :pager-config="tablePage" :proxy-config="tableProxy" @cell-dblclick="vxselect" border height="466px" highlight-current-row highlight-hover-row ref="ddlspecimenTable" resizable size="mini" stripe style="margin-top:5px"></vxe-grid>
              </el-main>
          </el-container>
      </el-dialog>
  </div>
</template>
<script>
// import { close } from "fs";
export default {
  props: ["width", "value", "appendtobody"],
  watch: {
      value(newVal) {
          this.myvalue = newVal;
      },
      myvalue(newVal) {
          this.$emit("input", newVal);
      }
  },
  data() {
      return {
          qcode: "",
          myvalue: this.value,
          fulldata: null,
          tableColumn: [],
          tablePage: {
              pageSize: 1000
          },
          tableProxy: {
              index: true, // 启用动态序号代理
              // 配置响应的数据属性
              props: {
                  result: "data.result",
                  total: "data.page.total"
              },
              ajax: {
                  // page 对象： { pageSize, currentPage }
                  query: param => {
                      let _this = this;
                      return new Promise((s, f) => {
                          var collist = [];
                          for (let i = 0, len = this.fulldata.Cols.length; i < len; i++) {
                              const item = this.fulldata.Cols[i];
                              let colitem = {
                                  field: item.field,
                                  title: item.title,
                                  width: 200
                              };
                              collist.push(colitem);
                          }
                          this.tableColumn = collist;

                          let cData = this.fulldata.Data;
                          console.log("this.qcode", this.qcode);
                          if (this.qcode != "") {
                              cData = cData.filter(item => item.specimen_code.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1 || item.specimen_name.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1 || item.inputcode.toUpperCase().indexOf(this.qcode.toUpperCase()) > -1);
                          }
                          s({ data: { page: { total: cData.length }, result: cData } });
                      });
                  }
              }
          },
          seloptions: [],
          dialogTableVisible: false
      };
  },
  computed: {
      myappendtobody: function() {
          return this.appendtobody;
      }
  },
  updated() {
      if (this.$refs.ddlspecimenTable) {
          if (this.fulldata.Data.length > 0) {
              this.$refs.ddlspecimenTable.setCurrentRow(this.fulldata.Data[0]);
          }
      }
      if (this.$refs.qcodeinput) {
          this.$refs.qcodeinput.focus();
      }
  },
  methods: {
      changeactiverow: function(cindex) {
          var row = this.$refs.ddlspecimenTable.getCurrentRow();
          var ridx = this.$refs.ddlspecimenTable.getRowIndex(row);
          var newidx = ridx + cindex;
          console.log("changeindex");
          if (newidx < 0) newidx = 0;
          if (newidx >= this.fulldata.Data.length) {
              newidx = 0;
          }
          var newrow = this.fulldata.Data[newidx];
          this.$refs.ddlspecimenTable.setCurrentRow(newrow);
          this.$refs.ddlspecimenTable.scrollToRow(newrow);
      },
      searchkeydown: function(evt) {
          if (evt.keyCode == 13) {
              // console.log("按了回车");
              this.myvalue = this.$refs.ddlspecimenTable.getCurrentRow().specimen_code;
              if (this.myvalue) {
                  this.dialogTableVisible = false;
                  // this.$emit("change", this.myvalue);
                  this.$emit("change", this.$refs.ddlspecimenTable.getCurrentRow());
                  this.$emit("changeObj", {code:'', name:'', row:this.$refs.ddlspecimenTable.getCurrentRow()});
                  this.$emit("returnBack", this.myvalue);
              }
          } else if (evt.keyCode == 40) {
              // console.log("按了向下");
              var cindex = 1;
              this.changeactiverow(cindex);
          } else if (evt.keyCode == 38) {
              // console.log("按了向上");
              var cindex = -1;
              this.changeactiverow(cindex);
          }
      },
      searchkeyup: function(evt) {
          if (evt.keyCode != 13 && evt.keyCode != 40 && evt.keyCode != 38) {
              // console.log("change触发");
              this.$refs.ddlspecimenTable.commitProxy("query");
              if (this.$refs.ddlspecimenTable) {
                  var rows = this.$refs.ddlspecimenTable.getTableData();
                  if (rows) {
                      var row = rows.visibleData[0];
                      if (row) {
                          console.log("row", row);
                          this.$refs.ddlspecimenTable.setCurrentRow(row);
                          // var rowid = row._XID;
                          // var newrow = this.$refs.ddlspecimenTable.getRowById(rowid);
                          // console.log("newrow", newrow);
                          // if (newrow) {
                          //     this.$refs.ddlspecimenTable.clearCurrentRow();
                          //     this.$refs.ddlspecimenTable.setRadioRow(newrow);
                          //     this.$refs.ddlspecimenTable.setCurrentRow(newrow);
                          //     var nnnrow = this.$refs.ddlspecimenTable.getCurrentRow();
                          //     console.log("nnnrow", nnnrow);
                          //     // this.$refs.ddlspecimenTable.setCurrentRow(newrow);
                          //     // this.$refs.ddlspecimenTable.scrollToRow(newrow);
                          // }
                      }
                  }
              }
          }
      },
      btnok: function() {
          this.myvalue = this.$refs.ddlspecimenTable.getCurrentRow().specimen_code;
          this.dialogTableVisible = false;
          // this.$emit("change", this.myvalue);
          this.$emit("change", this.$refs.ddlspecimenTable.getCurrentRow());
          this.$emit("changeObj", {code:'', name:'', row:this.$refs.ddlspecimenTable.getCurrentRow()});
          this.$emit("returnBack", this.myvalue);
      },
      popbigtab: function(evt) {
          this.qcode = "";
          if (this.$refs.ddlspecimenTable) {
              this.$refs.ddlspecimenTable.commitProxy("query");
          }
          this.$refs.ddlspecimenSelect.blur();
          this.dialogTableVisible = true;
      },
      changevt: function(evt) {
          // console.log("ddddddddddddd", evt);
          // console.log("dd", this.$refs.ddlspecimenSelect.selected.currentLabel);
          this.$emit("change", evt, this.$refs.ddlspecimenSelect.selected.currentLabel);
          this.$emit("changeObj", {code:evt, name:this.$refs.ddlspecimenSelect.selected.currentLabel, row:""});
          this.$emit("returnBack", evt);
      },
      queryspec: function() {},
      loadAllData: function() {
          this.$tool
              .request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "specimen"
                  }
              })
              .then(res => {
                  // console.log("res", res);
                  this.fulldata = res;
                  this.seloptions = this.fulldata.Data;
              })
              .catch(e => {
                  console.log("erro", e);
              });
      },
      vxselect: function(data, evt) {
          this.myvalue = data.row.specimen_code;
          this.dialogTableVisible = false;
          //this.$emit("change", this.myvalue);
          this.$emit("change", data.row);
          this.$emit("changeObj", {code:'', name:'', row:data.row});
          this.$emit("returnBack", this.myvalue);
      }
  },
  mounted() {
      this.loadAllData();
  }
};
</script>
<style scoped>
.el-aside {
  color: #333;
}
.el-main {
  padding: 0;
}
</style>
